import React, { useState } from 'react';
import { Layout, Menu, Avatar, Dropdown } from 'antd';
import {
  MenuFoldOutlined,
  MenuUnfoldOutlined,
  UserOutlined,
  HomeOutlined,
  SettingOutlined,
  BarChartOutlined,
  LogoutOutlined,
  CarOutlined,
  CalendarOutlined
} from '@ant-design/icons';
import { useNavigate, Outlet } from 'react-router-dom';
import './Layout.css';

const { Header, Sider, Content } = Layout;

const AppLayout = () => {
  const [collapsed, setCollapsed] = useState(false);
  const navigate = useNavigate();
  const currentUser = {
    name: '管理员',
    avatar: 'https://joeschmoe.io/api/v1/random'
  };

  const toggle = () => {
    setCollapsed(!collapsed);
  };

  const menuItems = [
    {
      key: 'dashboard',
      icon: <HomeOutlined />,
      label: '仪表盘',
      onClick: () => navigate('/dashboard')
    },
    {
      key: 'users',
      icon: <UserOutlined />,
      label: '客户管理',
      onClick: () => navigate('/users')
    },
    {
      key: 'products',
      icon: <CarOutlined />,
      label: '服务管理',
      onClick: () => navigate('/products')
    },
    {
      key: 'orders',
      icon: <CalendarOutlined />,
      label: '预约管理',
      onClick: () => navigate('/orders')
    },
    {
      key: 'charts',
      icon: <BarChartOutlined />,
      label: '业务报表',
      onClick: () => navigate('/charts')
    },
    {
      key: 'settings',
      icon: <SettingOutlined />,
      label: '系统设置',
      onClick: () => navigate('/settings')
    }
  ];

  const userMenu = (
    <Menu>
      <Menu.Item key="profile">
        <UserOutlined /> 个人资料
      </Menu.Item>
      <Menu.Item key="logout" onClick={() => navigate('/login')}>
        <LogoutOutlined /> 退出登录
      </Menu.Item>
    </Menu>
  );

  return (
    <Layout className="app-layout">
      <Sider
        trigger={null}
        collapsible
        collapsed={collapsed}
        width={240}
        className="sider"
      >
        <div className="logo-container">
          <div className="logo">
              <CarOutlined className="logo-icon" />
              {!collapsed && <span className="logo-text">洗车店管理系统</span>}
            </div>
        </div>
        <Menu
          mode="inline"
          theme="dark"
          items={menuItems}
          defaultSelectedKeys={['dashboard']}
          className="menu"
        />
      </Sider>
      <Layout className="main-layout">
        <Header className="header">
          <button
            type="button"
            className="trigger"
            onClick={toggle}
            aria-label="Toggle menu"
          >
            {collapsed ? <MenuUnfoldOutlined /> : <MenuFoldOutlined />}
          </button>
          <div className="header-right">
            <Dropdown overlay={userMenu} placement="bottomRight">
              <div className="user-info">
                <Avatar src={currentUser.avatar} alt={currentUser.name} />
                {!collapsed && <span className="user-name">{currentUser.name}</span>}
              </div>
            </Dropdown>
          </div>
        </Header>
        <Content className="content">
          <div className="content-wrapper">
            <Outlet />
          </div>
        </Content>
      </Layout>
    </Layout>
  );
};

export default AppLayout;